import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import './index.less'
import router from "@/router";

export default defineComponent({
    setup() {
        const { t } = useI18n()
        const goPage = (page: any) => {
            const productElement: any = document.querySelector('.product');
            const newStyle = 'opacity: 0; visibility: hidden;transition: 0s;';
            productElement.style.cssText = newStyle;
            router.push(page);
        }
        const moveIn = () => {
            const productElement: any = document.querySelector('.product');
            const newStyle = 'opacity: 1; visibility: visible;transition: 1s;';
            productElement.style.cssText = newStyle;
        }
        const remove = () => {
            const productElement: any = document.querySelector('.product');
            const newStyle = 'opacity: 0; visibility: hidden;transition: 0s;';
            productElement.style.cssText = newStyle;
        }
        return () => (
            <div class='text chanpin' onMouseenter={() => moveIn()} onMouseleave={() => remove()}>
                <span>{t('head.product')}</span>
                <div class='product'>
                    <div class='product_mask'>
                        <div class='product_title'>{t('head.backtesting_capability')}</div>
                        <div class='product_a'>
                            <div class='product_content' onClick={() => goPage('strategy')}>
                                <div class='product_content_left'><img src="/head/product/icon_track.png" alt="" /></div>
                                <div class='product_content_right'>
                                    <div class='text_a'> <div>{t('head.strategy_backtesting')}</div> <img src="/head/home_icon_more_normal.svg" /></div>
                                    <div class='text_b'>{t('head.conduct_simulated_trading_backtesting')}</div>
                                </div>
                            </div>
                            <div class='product_content' onClick={() => goPage('manualTrading')}>
                                <div class='product_content_left'><img src="/head/product/icon_trade.png" alt="" /></div>
                                <div class='product_content_right'>
                                    <div class='text_a'> <div>{t('head.manual_trading')}</div> <img src="/head/home_icon_more_normal.svg" /></div>
                                    <div class='text_b'>{t('head.hang_limit_orders_on_the_chain')}</div>
                                </div>
                            </div>
                            <div class='product_content' onClick={() => goPage('chainData')}>
                                <div class='product_content_left'><img src="/head/product/icon_data.png" alt="" /></div>
                                <div class='product_content_right'>
                                    <div class='text_a'><div>{t('head.k_line_and_on_chain_data')}</div> <img src="/head/home_icon_more_normal.svg" /></div>
                                    <div class='text_b'>{t('head.real_time_access_to_transaction_k_line_and_on_chain_data')}</div>
                                </div>
                            </div>
                        </div>
                        <div class='product_title'>{t('head.multiple_types_of_robots')}</div>
                        <div class='product_a'>
                            <div class='product_content'>
                                <div class='product_content_left'><img src="/head/product/icon_copy.png" alt="" /></div>
                                <div class='product_content_right'>
                                    <div class='text_a'><div>{t('head.replicant_robots')}</div><img src="/head/home_icon_more_normal.svg" /></div>
                                    <div class='text_b'>{t('head.documentary_trader')}</div>
                                </div>
                            </div>
                            <div class='product_content'>
                                <div class='product_content_left'><img src="/head/product/icon_tradebot.png" alt="" /></div>
                                <div class='product_content_right'>
                                    <div class='text_a'>{t('head.trading_robot')}<img src="/head/home_icon_more_normal.svg" /></div>
                                    <div class='text_b'>{t('head.exclude_emotional_transactions')}</div>
                                </div>
                            </div>
                            <div class='product_content'>
                                <div class='product_content_left'><img src="/head/product/icon_demo.png" alt="" /></div>
                                <div class='product_content_right'>
                                    <div class='text_a'>{t('head.market_maker_robot')}<img src="/head/home_icon_more_normal.svg" /></div>
                                    <div class='text_b'>{t('head.exclude_emotional_transactions2')}</div>
                                </div>
                            </div>
                        </div>
                        <div class='product_a'>
                            <div class='product_content'>
                                <div class='product_content_left'><img src="/head/product/icon_ia.png" alt="" /></div>
                                <div class='product_content_right'>
                                    <div class='text_a'><div>{t('head.arbitrage_robot')}</div><img src="/head/home_icon_more_normal.svg" /></div>
                                    <div class='text_b'>{t('head.cross_exchange_arbitrage')}</div>
                                </div>
                            </div>
                            <div class='product_content'>
                                <div class='product_content_left'><img src="/head/product/icon_dca.png" alt="" /></div>
                                <div class='product_content_right'>
                                    <div class='text_a'>{t('head.demo_robot')}<img src="/head/home_icon_more_normal.svg" /></div>
                                    <div class='text_b'>{t('head.no_risk_trading_experience')}</div>
                                </div>
                            </div>
                        </div>
                        <div class='product_title'>{t('head.template_mall')}</div>
                        <div class='product_a'>
                            <div class='product_content'>
                                <div class='product_content_left'><img src="/head/product/icon_signal.png" alt="" /></div>
                                <div class='product_content_right'>
                                    <div class='text_a'><div>{t('head.signal_mall')}</div><img src="/head/home_icon_more_normal.svg" /></div>
                                    <div class='text_b'>{t('head.transaction_decision')}</div>
                                </div>
                            </div>
                            <div class='product_content'>
                                <div class='product_content_left'><img src="/head/product/icon_tradebot1.png" alt="" /></div>
                                <div class='product_content_right'>
                                    <div class='text_a'>{t('head.strategy_mall')}<img src="/head/home_icon_more_normal.svg" /></div>
                                    <div class='text_b'>{t('head.trading_like_a_professional')}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
})